<!DOCTYPE html>
<html>

<head>
        <meta charset="UTF-8">
        <title>小球碰撞反弹</title>
        <style type="text/css">
                #canvas1 {
                        border: 4px dashed black;
                        margin: 0 auto;
                        display: block;
                }
        </style>
</head>

<body>
        <canvas id="canvas1" width="600" height="600"></canvas>
</body>
<script type="text/javascript">
                var canvas = document.getElementById("canvas1");
                var ctx = canvas.getContext("2d");
                //随机函数
                function randomNum (m,n) {
                        return Math.floor(Math.random() * (n - m + 1) + m);
                }
                //创建小球类
                function Ball () {
                        //随机小球半径
                        this.r = randomNum(20,30);
                        //随机颜色
                        this.color = 'rgb(' + randomNum(0,255) + ',' + randomNum(0,255) + ',' + randomNum(0,255) + ')';
                        //随机小球的位置
                        this.x = randomNum(this.r,canvas.width-this.r);
                        this.y = randomNum(this.r,canvas.height-this.r);
                        //随机小球速度
                        this.speedX = randomNum(2,5) * randomNum(0,1) ? 1 : -1;
                        this.speedY = randomNum(2,5) * randomNum(0,1) ? 1 : -1;
                }
                //小球移动
                Ball.prototype.move = function () {
                        this.x += this.speedX;
                        this.y += this.speedY;
                        //判断是否碰到边界
                        //左边界
                        if (this.x <= this.r) {
                                this.x = this.r;
                                //反弹
                                this.speedX *= -1;
                        }
                        //右边界
                        if (this.x >= canvas.width-this.r) {
                                this.x = canvas.width-this.r;
                                this.speedX *= -1;
                        }
                        if (this.y <= this.r) {
                                this.y = this.r;
                                this.speedY *= -1;
                        }
                        if (this.y >= canvas.height-this.r) {
                                this.y = canvas.height-this.r;
                                this.speedY *= -1;
                        }
                }
                //绘制小球
                Ball.prototype.drawBall = function () {
                        ctx.beginPath();
                        ctx.arc(this.x,this.y,this.r,0,Math.PI*2,false);
                        ctx.fillStyle = this.color;
                        ctx.fill();
                       
                }
                //创建小球的对象
                var balls = [];
                for (var i = 0;i < 20;i++) {
                        var ball = new Ball();
                        balls.push(ball);
                }
                //让小球移动
                setInterval(function () {
                        ctx.clearRect(0,0,canvas.width,canvas.height);
                        for (var i = 0;i < balls.length;i++) {
                                balls[i].move();
                                balls[i].drawBall();
                                //移动后检测小球碰撞反弹
                                for (j = 0;j < balls.length;j++) {
                                        //判断不是同一个球
                                        if (balls[i] == balls[j]) {
                                                continue;//不做碰撞检测
                                        }
                                        //碰撞检测
                                        if (ballCrash(balls[i],balls[j])) {
                                                //互换速度
                                                //使用第三个变量
                                                var tempX = balls[i].speedX;
                                                balls[i].speedX = balls[j].speedX;
                                                balls[j].speedX = tempX;
                                                var tempY = balls[i].speedY;
                                                balls[i].speedY = balls[j].speedY;
                                                balls[j].speedY = tempY;
                                        }
                                }
                        }
                },0.1)
                //碰撞检测
                function ballCrash (ball1,ball2) {
                        //两个小球之间的距离
                        var distance = Math.sqrt(Math.pow(ball1.x - ball2.x,2) + Math.pow(ball1.y - ball2.y,2));
                        if (distance <= ball1.r + ball2.r) {
                                return true;//碰撞
                        } else{
                                return false;//没有碰撞
                        }
                }
        </script>

</html>